import React, { useState, useEffect } from 'react';
import {
  TextField,
  Button,
  Box,
  Typography,
  Grid,
  FormControlLabel,
  Checkbox,
  MenuItem,
  Paper,
  Divider,
  InputAdornment,
  CircularProgress,
  FormControl,
  InputLabel,
  Select,
  FormHelperText
} from '@mui/material';
import PersonIcon from '@mui/icons-material/Person';
import HomeWorkIcon from '@mui/icons-material/HomeWork';
import PhoneIcon from '@mui/icons-material/Phone';
import EmailIcon from '@mui/icons-material/Email';
import LocationOnIcon from '@mui/icons-material/LocationOn';
import BusinessIcon from '@mui/icons-material/Business';
import FaxIcon from '@mui/icons-material/Fax';
import HelpIcon from '@mui/icons-material/Help';
import NotesIcon from '@mui/icons-material/Notes';
import useMlsFormSubmissionComplete from './use-mls-form-submission-complete';
import { LogViewer } from 'utils/use-server';
import {
  MLS_DB_HOST,
  MLS_DB_NAME,
  MLS_DB_TABLE,
  MLS_DB_USERNAME,
  MLS_DB_PASSWORD
} from 'config/index';

// States array for dropdown
const STATES = [
  'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 
  'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 
  'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 
  'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 
  'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 
  'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 
  'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 
  'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];

// Countries array for dropdown
const COUNTRIES = [
  'USA', 'Canada', 'Mexico', 'United Kingdom', 'Australia', 'Germany', 'France', 'Spain', 'Italy', 'Japan'
];

// How did you hear about us options
const DEFAULT_HOW_OPTIONS = [
  'Yahoo', 'Yandex', 'Google', 'Facebook'
];

/**
 * Enhanced MLS Form Component with section control and complete field support
 */
const MLSFormComponentComplete = ({ 
  useBorder = true, 
  useColor = '#ffffff', 
  useSize = 'small', 
  useButtonSize = 'medium',
  useMiddle = false,
  showLogViewer = false,
  defaultSameAddress = false, // NEW PROP: Controls whether address toggle is set by default
  sectionOrder = ['contact', 'personal', 'owner', 'property', 'additional'], // NEW PROP: Controls section ordering
  howOptions = DEFAULT_HOW_OPTIONS // NEW PROP: Configurable "How did you hear about us" options
}) => {
  const [formData, setFormData] = useState({
    // Contact Information
    cEmail: '',
    cPhone: '',
    cFax: '',
    cHow: howOptions[0], // Default to first option

    // Personal Information
    cBillFname: '',
    cBillLname: '',
    cBillCompany: '',
    
    // Owner Address
    cBillAddress1: '',
    cBillAddress2: '',
    cBillCity: '',
    cBillState: '',
    cBillZip: '',
    bill_county: '',
    cBillCountry: 'USA',
    
    // Same Address Toggle
    billEqualShip: defaultSameAddress ? 'Y' : 'N',
    
    // Property Information
    cShipCompany: '',
    cShipFname: '',
    cShipLname: '',
    cShipAddress1: '',
    cShipAddress2: '',
    cShipCity: '',
    cShipState: '',
    cShipZip: '',
    ship_county: '',
    cShipCountry: 'USA',
    
    // Additional Information
    cMemo: '',
    cPass: '',
    cPassHint: '',
    cWholesaleDiscount: null
  });

  const [errors, setErrors] = useState({});
  const { submitForm, submitting, submitSuccess, resetSubmission } = useMlsFormSubmissionComplete({
    dbHost: MLS_DB_HOST,
    dbName: MLS_DB_NAME,
    dbTable: MLS_DB_TABLE,
    dbUsername: MLS_DB_USERNAME,
    dbPassword: MLS_DB_PASSWORD
  });

  useEffect(() => {
    // Initialize the form with the default same address setting
    if (defaultSameAddress) {
      setFormData(prevData => ({
        ...prevData,
        billEqualShip: 'Y'
      }));
    } else {
      setFormData(prevData => ({
        ...prevData,
        billEqualShip: 'N'
      }));
    }
  }, [defaultSameAddress]);

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData(prevData => ({
      ...prevData,
      [name]: type === 'checkbox' ? (checked ? 'Y' : 'N') : value
    }));

    // If shipping address is same as billing, update shipping fields
    if (name === 'billEqualShip' && checked) {
      setFormData(prevData => ({
        ...prevData,
        cShipAddress1: prevData.cBillAddress1,
        cShipAddress2: prevData.cBillAddress2,
        cShipCity: prevData.cBillCity,
        cShipState: prevData.cBillState,
        cShipZip: prevData.cBillZip,
        ship_county: prevData.bill_county,
        cShipCountry: prevData.cBillCountry,
        cShipFname: prevData.cBillFname,
        cShipLname: prevData.cBillLname,
        cShipCompany: prevData.cBillCompany
      }));
    }

    // Clear error for this field if any
    if (errors[name]) {
      setErrors(prev => ({ ...prev, [name]: '' }));
    }
  };

  const validate = () => {
    const newErrors = {};
    
    // Required fields validation
    // Contact Information
    if (!formData.cEmail) {
      newErrors.cEmail = 'Email is required';
    } else if (!/\S+@\S+\.\S+/.test(formData.cEmail)) {
      newErrors.cEmail = 'Email is invalid';
    }
    if (!formData.cPhone) newErrors.cPhone = 'Phone number is required';
    if (!formData.cHow) newErrors.cHow = 'Please select how you heard about us';
    
    // Personal Information
    if (!formData.cBillFname) newErrors.cBillFname = 'First name is required';
    if (!formData.cBillLname) newErrors.cBillLname = 'Last name is required';
    
    // Owner Address
    if (!formData.cBillAddress1) newErrors.cBillAddress1 = 'Address is required';
    if (!formData.cBillCity) newErrors.cBillCity = 'City is required';
    if (!formData.cBillState) newErrors.cBillState = 'State is required';
    if (!formData.cBillZip) newErrors.cBillZip = 'ZIP code is required';
    
    // If not using same address for property, validate property address fields
    if (formData.billEqualShip === 'N') {
      if (!formData.cShipFname) newErrors.cShipFname = 'Property owner first name is required';
      if (!formData.cShipLname) newErrors.cShipLname = 'Property owner last name is required';
      if (!formData.cShipAddress1) newErrors.cShipAddress1 = 'Property address is required';
      if (!formData.cShipCity) newErrors.cShipCity = 'Property city is required';
      if (!formData.cShipState) newErrors.cShipState = 'Property state is required';
      if (!formData.cShipZip) newErrors.cShipZip = 'Property ZIP code is required';
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    
    if (validate()) {
      console.log('Form data submitted:', formData);
      
      // Submit the form using our hook
      submitForm(formData).then(success => {
        if (success) {
          // Reset form after submission
          setFormData({
            cEmail: '',
            cPhone: '',
            cFax: '',
            cHow: howOptions[0],
            cBillFname: '',
            cBillLname: '',
            cBillCompany: '',
            cBillAddress1: '',
            cBillAddress2: '',
            cBillCity: '',
            cBillState: '',
            cBillZip: '',
            bill_county: '',
            cBillCountry: 'USA',
            billEqualShip: defaultSameAddress ? 'Y' : 'N',
            cShipCompany: '',
            cShipFname: '',
            cShipLname: '',
            cShipAddress1: '',
            cShipAddress2: '',
            cShipCity: '',
            cShipState: '',
            cShipZip: '',
            ship_county: '',
            cShipCountry: 'USA',
            cMemo: '',
            cPass: '',
            cPassHint: '',
            cWholesaleDiscount: null
          });
        }
      });
    } else {
      console.log('Form has errors:', errors);
    }
  };

  // Style configurations based on props
  const textFieldStyle = {
    backgroundColor: useColor,
    '& .MuiOutlinedInput-root': {
      '& fieldset': {
        borderColor: useBorder ? 'rgba(0, 0, 0, 0.23)' : 'transparent',
      },
    },
    marginBottom: '8px',
  };

  const formContainerStyle = {
    textAlign: useMiddle ? 'center' : 'left',
    padding: 3,
    borderRadius: 2,
    boxShadow: '0 2px 10px rgba(0, 0, 0, 0.1)',
    backgroundColor: '#ffffff',
  };

  const sectionHeaderStyle = {
    fontSize: '0.9rem',
    fontWeight: 'bold',
    marginBottom: '8px',
    marginTop: '16px',
    color: 'primary.main',
  };

  // Render the correct sections based on section order
  const renderSection = (section) => {
    switch(section) {
      case 'contact':
        return (
          <Box key="contact">
            <Typography sx={sectionHeaderStyle}>
              <EmailIcon sx={{ fontSize: '1rem', verticalAlign: 'middle', mr: 0.5, color: 'primary.main' }} />
              Contact Information
            </Typography>
            
            <Grid container spacing={1}>
              <Grid item xs={12} sm={6}>
                <TextField
                  fullWidth
                  label="Email"
                  name="cEmail"
                  value={formData.cEmail}
                  onChange={handleChange}
                  error={!!errors.cEmail}
                  helperText={errors.cEmail}
                  size={useSize}
                  sx={textFieldStyle}
                  required
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position="start">
                        <EmailIcon fontSize="small" />
                      </InputAdornment>
                    ),
                  }}
                />
              </Grid>
              <Grid item xs={12} sm={6}>
                <TextField
                  fullWidth
                  label="Phone"
                  name="cPhone"
                  value={formData.cPhone}
                  onChange={handleChange}
                  error={!!errors.cPhone}
                  helperText={errors.cPhone}
                  size={useSize}
                  sx={textFieldStyle}
                  required
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position="start">
                        <PhoneIcon fontSize="small" />
                      </InputAdornment>
                    ),
                  }}
                />
              </Grid>
              <Grid item xs={12} sm={6}>
                <TextField
                  fullWidth
                  label="Fax (Optional)"
                  name="cFax"
                  value={formData.cFax || ''}
                  onChange={handleChange}
                  error={!!errors.cFax}
                  helperText={errors.cFax}
                  size={useSize}
                  sx={textFieldStyle}
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position="start">
                        <FaxIcon fontSize="small" />
                      </InputAdornment>
                    ),
                  }}
                />
              </Grid>
              <Grid item xs={12} sm={6}>
                <FormControl 
                  fullWidth 
                  required 
                  error={!!errors.cHow}
                  size={useSize}
                  sx={textFieldStyle}
                >
                  <InputLabel id="how-heard-label">How did you hear about us?</InputLabel>
                  <Select
                    labelId="how-heard-label"
                    name="cHow"
                    value={formData.cHow}
                    onChange={handleChange}
                    label="How did you hear about us?"
                    startAdornment={
                      <InputAdornment position="start">
                        <HelpIcon fontSize="small" />
                      </InputAdornment>
                    }
                  >
                    {howOptions.map(option => (
                      <MenuItem key={option} value={option}>{option}</MenuItem>
                    ))}
                  </Select>
                  {errors.cHow && <FormHelperText>{errors.cHow}</FormHelperText>}
                </FormControl>
              </Grid>
            </Grid>
          </Box>
        );
      
      case 'personal':
        return (
          <Box key="personal">
            <Typography sx={sectionHeaderStyle}>
              <PersonIcon sx={{ fontSize: '1rem', verticalAlign: 'middle', mr: 0.5, color: 'primary.main' }} />
              Personal Information
            </Typography>
            
            <Grid container spacing={1}>
              <Grid item xs={12} sm={6}>
                <TextField
                  fullWidth
                  label="First Name"
                  name="cBillFname"
                  value={formData.cBillFname}
                  onChange={handleChange}
                  error={!!errors.cBillFname}
                  helperText={errors.cBillFname}
                  size={useSize}
                  sx={textFieldStyle}
                  required
                />
              </Grid>
              <Grid item xs={12} sm={6}>
                <TextField
                  fullWidth
                  label="Last Name"
                  name="cBillLname"
                  value={formData.cBillLname}
                  onChange={handleChange}
                  error={!!errors.cBillLname}
                  helperText={errors.cBillLname}
                  size={useSize}
                  sx={textFieldStyle}
                  required
                />
              </Grid>
              <Grid item xs={12}>
                <TextField
                  fullWidth
                  label="Company (Optional)"
                  name="cBillCompany"
                  value={formData.cBillCompany || ''}
                  onChange={handleChange}
                  error={!!errors.cBillCompany}
                  helperText={errors.cBillCompany}
                  size={useSize}
                  sx={textFieldStyle}
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position="start">
                        <BusinessIcon fontSize="small" />
                      </InputAdornment>
                    ),
                  }}
                />
              </Grid>
            </Grid>
          </Box>
        );
      
      case 'owner':
        return (
          <Box key="owner">
            <Typography sx={sectionHeaderStyle}>
              <LocationOnIcon sx={{ fontSize: '1rem', verticalAlign: 'middle', mr: 0.5, color: 'primary.main' }} />
              Owner Address
            </Typography>
            
            <Grid container spacing={1}>
              <Grid item xs={12}>
                <TextField
                  fullWidth
                  label="Street Address"
                  name="cBillAddress1"
                  value={formData.cBillAddress1}
                  onChange={handleChange}
                  error={!!errors.cBillAddress1}
                  helperText={errors.cBillAddress1}
                  size={useSize}
                  sx={textFieldStyle}
                  required
                />
              </Grid>
              <Grid item xs={12}>
                <TextField
                  fullWidth
                  label="Address Line 2 (Optional)"
                  name="cBillAddress2"
                  value={formData.cBillAddress2 || ''}
                  onChange={handleChange}
                  error={!!errors.cBillAddress2}
                  helperText={errors.cBillAddress2}
                  size={useSize}
                  sx={textFieldStyle}
                />
              </Grid>
              <Grid item xs={12} sm={5}>
                <TextField
                  fullWidth
                  label="City"
                  name="cBillCity"
                  value={formData.cBillCity}
                  onChange={handleChange}
                  error={!!errors.cBillCity}
                  helperText={errors.cBillCity}
                  size={useSize}
                  sx={textFieldStyle}
                  required
                />
              </Grid>
              <Grid item xs={12} sm={4}>
                <TextField
                  fullWidth
                  select
                  label="State"
                  name="cBillState"
                  value={formData.cBillState}
                  onChange={handleChange}
                  error={!!errors.cBillState}
                  helperText={errors.cBillState}
                  size={useSize}
                  sx={textFieldStyle}
                  required
                >
                  {STATES.map((state) => (
                    <MenuItem key={state} value={state}>
                      {state}
                    </MenuItem>
                  ))}
                </TextField>
              </Grid>
              <Grid item xs={12} sm={3}>
                <TextField
                  fullWidth
                  label="ZIP Code"
                  name="cBillZip"
                  value={formData.cBillZip}
                  onChange={handleChange}
                  error={!!errors.cBillZip}
                  helperText={errors.cBillZip}
                  size={useSize}
                  sx={textFieldStyle}
                  required
                />
              </Grid>
              <Grid item xs={12} sm={6}>
                <TextField
                  fullWidth
                  label="County (Optional)"
                  name="bill_county"
                  value={formData.bill_county || ''}
                  onChange={handleChange}
                  error={!!errors.bill_county}
                  helperText={errors.bill_county}
                  size={useSize}
                  sx={textFieldStyle}
                />
              </Grid>
              <Grid item xs={12} sm={6}>
                <TextField
                  fullWidth
                  select
                  label="Country"
                  name="cBillCountry"
                  value={formData.cBillCountry}
                  onChange={handleChange}
                  error={!!errors.cBillCountry}
                  helperText={errors.cBillCountry}
                  size={useSize}
                  sx={textFieldStyle}
                  required
                >
                  {COUNTRIES.map((country) => (
                    <MenuItem key={country} value={country}>
                      {country}
                    </MenuItem>
                  ))}
                </TextField>
              </Grid>
            </Grid>
          </Box>
        );
      
      case 'property':
        return (
          <Box key="property">
            <Typography sx={sectionHeaderStyle}>
              <HomeWorkIcon sx={{ fontSize: '1rem', verticalAlign: 'middle', mr: 0.5, color: 'primary.main' }} />
              Property Information
            </Typography>
            
            <Grid container spacing={1}>
              <Grid item xs={12}>
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={formData.billEqualShip === 'Y'}
                      onChange={handleChange}
                      name="billEqualShip"
                      color="primary"
                      size={useSize}
                    />
                  }
                  label={<Typography sx={{ fontSize: '0.8rem' }}>Property address is the same as owner address</Typography>}
                />
              </Grid>
              
              {formData.billEqualShip === 'N' && (
                <>
                  <Grid item xs={12} sm={6}>
                    <TextField
                      fullWidth
                      label="Property Owner First Name"
                      name="cShipFname"
                      value={formData.cShipFname}
                      onChange={handleChange}
                      error={!!errors.cShipFname}
                      helperText={errors.cShipFname}
                      size={useSize}
                      sx={textFieldStyle}
                      required
                    />
                  </Grid>
                  <Grid item xs={12} sm={6}>
                    <TextField
                      fullWidth
                      label="Property Owner Last Name"
                      name="cShipLname"
                      value={formData.cShipLname}
                      onChange={handleChange}
                      error={!!errors.cShipLname}
                      helperText={errors.cShipLname}
                      size={useSize}
                      sx={textFieldStyle}
                      required
                    />
                  </Grid>
                  <Grid item xs={12}>
                    <TextField
                      fullWidth
                      label="Property Company (Optional)"
                      name="cShipCompany"
                      value={formData.cShipCompany || ''}
                      onChange={handleChange}
                      error={!!errors.cShipCompany}
                      helperText={errors.cShipCompany}
                      size={useSize}
                      sx={textFieldStyle}
                      InputProps={{
                        startAdornment: (
                          <InputAdornment position="start">
                            <BusinessIcon fontSize="small" />
                          </InputAdornment>
                        ),
                      }}
                    />
                  </Grid>
                  <Grid item xs={12}>
                    <TextField
                      fullWidth
                      label="Property Street Address"
                      name="cShipAddress1"
                      value={formData.cShipAddress1}
                      onChange={handleChange}
                      error={!!errors.cShipAddress1}
                      helperText={errors.cShipAddress1}
                      size={useSize}
                      sx={textFieldStyle}
                      required
                    />
                  </Grid>
                  <Grid item xs={12}>
                    <TextField
                      fullWidth
                      label="Property Address Line 2 (Optional)"
                      name="cShipAddress2"
                      value={formData.cShipAddress2 || ''}
                      onChange={handleChange}
                      error={!!errors.cShipAddress2}
                      helperText={errors.cShipAddress2}
                      size={useSize}
                      sx={textFieldStyle}
                    />
                  </Grid>
                  <Grid item xs={12} sm={5}>
                    <TextField
                      fullWidth
                      label="Property City"
                      name="cShipCity"
                      value={formData.cShipCity}
                      onChange={handleChange}
                      error={!!errors.cShipCity}
                      helperText={errors.cShipCity}
                      size={useSize}
                      sx={textFieldStyle}
                      required
                    />
                  </Grid>
                  <Grid item xs={12} sm={4}>
                    <TextField
                      fullWidth
                      select
                      label="Property State"
                      name="cShipState"
                      value={formData.cShipState}
                      onChange={handleChange}
                      error={!!errors.cShipState}
                      helperText={errors.cShipState}
                      size={useSize}
                      sx={textFieldStyle}
                      required
                    >
                      {STATES.map((state) => (
                        <MenuItem key={state} value={state}>
                          {state}
                        </MenuItem>
                      ))}
                    </TextField>
                  </Grid>
                  <Grid item xs={12} sm={3}>
                    <TextField
                      fullWidth
                      label="Property ZIP"
                      name="cShipZip"
                      value={formData.cShipZip}
                      onChange={handleChange}
                      error={!!errors.cShipZip}
                      helperText={errors.cShipZip}
                      size={useSize}
                      sx={textFieldStyle}
                      required
                    />
                  </Grid>
                  <Grid item xs={12} sm={6}>
                    <TextField
                      fullWidth
                      label="Property County (Optional)"
                      name="ship_county"
                      value={formData.ship_county || ''}
                      onChange={handleChange}
                      error={!!errors.ship_county}
                      helperText={errors.ship_county}
                      size={useSize}
                      sx={textFieldStyle}
                    />
                  </Grid>
                  <Grid item xs={12} sm={6}>
                    <TextField
                      fullWidth
                      select
                      label="Property Country"
                      name="cShipCountry"
                      value={formData.cShipCountry}
                      onChange={handleChange}
                      error={!!errors.cShipCountry}
                      helperText={errors.cShipCountry}
                      size={useSize}
                      sx={textFieldStyle}
                      required
                    >
                      {COUNTRIES.map((country) => (
                        <MenuItem key={country} value={country}>
                          {country}
                        </MenuItem>
                      ))}
                    </TextField>
                  </Grid>
                </>
              )}
            </Grid>
          </Box>
        );
      
      case 'additional':
        return (
          <Box key="additional">
            <Typography sx={sectionHeaderStyle}>
              <NotesIcon sx={{ fontSize: '1rem', verticalAlign: 'middle', mr: 0.5, color: 'primary.main' }} />
              Additional Information
            </Typography>
            
            <Grid container spacing={1}>
              <Grid item xs={12}>
                <TextField
                  fullWidth
                  label="Additional Notes"
                  name="cMemo"
                  value={formData.cMemo || ''}
                  onChange={handleChange}
                  error={!!errors.cMemo}
                  helperText={errors.cMemo}
                  size={useSize}
                  sx={textFieldStyle}
                  multiline
                  rows={4}
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position="start" sx={{ alignSelf: 'flex-start', mt: 1.5 }}>
                        <NotesIcon fontSize="small" />
                      </InputAdornment>
                    ),
                  }}
                />
              </Grid>
              <Grid item xs={12} sm={6}>
                <TextField
                  fullWidth
                  label="Password (Optional)"
                  name="cPass"
                  type="password"
                  value={formData.cPass || ''}
                  onChange={handleChange}
                  error={!!errors.cPass}
                  helperText={errors.cPass}
                  size={useSize}
                  sx={textFieldStyle}
                />
              </Grid>
              <Grid item xs={12} sm={6}>
                <TextField
                  fullWidth
                  label="Password Hint (Optional)"
                  name="cPassHint"
                  value={formData.cPassHint || ''}
                  onChange={handleChange}
                  error={!!errors.cPassHint}
                  helperText={errors.cPassHint}
                  size={useSize}
                  sx={textFieldStyle}
                />
              </Grid>
              <Grid item xs={12}>
                <TextField
                  fullWidth
                  label="Wholesale Discount % (Optional)"
                  name="cWholesaleDiscount"
                  type="number"
                  InputProps={{ inputProps: { min: 0, max: 100, step: 0.1 } }}
                  value={formData.cWholesaleDiscount || ''}
                  onChange={handleChange}
                  error={!!errors.cWholesaleDiscount}
                  helperText={errors.cWholesaleDiscount}
                  size={useSize}
                  sx={textFieldStyle}
                />
              </Grid>
            </Grid>
          </Box>
        );
      
      default:
        return null;
    }
  };

  return (
    <Paper sx={formContainerStyle} elevation={3}>
      {showLogViewer && (
        <Box sx={{ mb: 3 }}>
          <LogViewer 
            maxHeight="200px" 
            showTimestamp={true}
            showLevel={true}
            showData={true}
            maxItems={50}
          />
        </Box>
      )}
      
      {!submitSuccess ? (
        <form onSubmit={handleSubmit}>
          <Typography variant="h6" sx={{ fontSize: '1.1rem', fontWeight: 'bold', mb: 2, textAlign: 'center', color: 'primary.main' }}>
            Kickstart Your Commission-Free Home Sale
          </Typography>
          
          <Divider sx={{ mb: 2 }} />
          
          {sectionOrder.map((section, index) => (
            <React.Fragment key={section}>
              {renderSection(section)}
              {index < sectionOrder.length - 1 && <Divider sx={{ my: 2 }} />}
            </React.Fragment>
          ))}
          
          <Box sx={{ mt: 3, textAlign: 'center' }}>
            <Button 
              type="submit" 
              variant="contained" 
              color="primary" 
              size={useButtonSize}
              disabled={submitting}
              sx={{ 
                fontWeight: 'bold', 
                px: 4,
                py: 1.5,
                borderRadius: '4px',
                fontSize: '0.9rem'
              }}
            >
              {submitting ? (
                <>
                  <CircularProgress size={20} color="inherit" sx={{ mr: 1 }} />
                  SUBMITTING...
                </>
              ) : (
                'MAXIMIZE MY LISTING PROFIT NOW'
              )}
            </Button>
            <Typography sx={{ fontSize: '0.7rem', mt: 1, color: '#666' }}>
              By submitting, you agree to our Terms of Service and Privacy Policy
            </Typography>
          </Box>
        </form>
      ) : (
        <Box sx={{ textAlign: 'center', py: 4 }}>
          <Typography variant="h6" sx={{ color: '#2e7d32', mb: 2 }}>
            Thank You for Your Submission!
          </Typography>
          <Typography variant="body2">
            We've received your information and a member of our team will contact you shortly to discuss your flat-fee MLS listing.
          </Typography>
          <Button 
            variant="outlined" 
            color="primary"
            size={useButtonSize}
            sx={{ mt: 3 }}
            onClick={() => resetSubmission()}
          >
            Submit Another Property
          </Button>
        </Box>
      )}
    </Paper>
  );
};

export default MLSFormComponentComplete;